<template>
    <Layout>
        <template #Setting>
            <a-flex gap="middle" style="height:100%" :align="'center'">
                <a-button @click="Log">ConsoleLog</a-button>
                <a-button>预览</a-button>
                <a-button type="primary" @click="Save">保存</a-button>
            </a-flex>
        </template>
        <PluginComp Plugin="VisualEditor-Core.DocumentEditor" ref="VisualEditor" />
    </Layout>
</template>

<script setup>
import { ref, provide } from 'vue'
import Layout from './_Layout.vue'
import TestData from '../TestData.js'


const VisualEditor = ref();
provide('VisualEditor-Core.DocumentEditor.Menu', ['Layout', 'Basis', 'Form', 'Report', 'Expert'])


provide('VisualEditor-Core.DocumentEditor.load', Comp => {
    Comp && Comp.SetData(TestData)
});


const Log = function () {
    VisualEditor.value.Comp.Log()
}

const Save = function () {
    VisualEditor.value.Comp.Save()
}

</script>

<style lang="less" scoped></style>